import React, { useEffect, useState } from 'react'
import './Sidebar.css'
import { useNavigate } from 'react-router';

export default function Sidebar() {
  const imgPath = 'src/components/Sidebar/images/'
  const menuItems = [
    {
      title:'首页',
      path:'/home',
      icon:imgPath + 'home1.png',
      iconActive:imgPath + 'home2.png',
      key:'home',
      children:[]
    },
    {
      title:'数据',
      path:'/data',
      icon:imgPath + 'data1.png',
      iconActive:imgPath + 'data2.png',
      key:'data',
      children:[
        {
          title:'订单',
          path:'/order',
          key:'order',
          person:'data'
        },
        {
          title:'客户名单',
          path:'/customer',
          key:'customer',
          person:'data'
        },
        {
          title:'评论列表',
          path:'/comment',
          key:'comment',
          person:'data'
        }
      ]
    },
    {
      title:'活动',
      path:'/activity',
      icon:imgPath + 'activity1.png',
      iconActive:imgPath + 'activity2.png',
      key:'activity',
      children:[]
    },
    {
      title:'消息',
      path:'/message',
      icon:imgPath + 'message1.png',
      iconActive:imgPath + 'message2.png',
      key:'message',
      children:[]
    },
    {
      title:'日历',
      path:'/calendar',
      icon:imgPath + 'calendar1.png',
      iconActive:imgPath + 'calendar2.png',
      key:'calendar',
      children:[]
    },
    {
      title:'邮件',
      path:'/mail',
      icon:imgPath + 'mail1.png',
      iconActive:imgPath + 'mail2.png',
      key:'mail',
      children:[]
    },
    {
      title:'设置',
      path:'/setting',
      icon:imgPath + 'setting1.png',
      iconActive:imgPath + 'setting2.png',
      key:'setting',
      children:[
        {
          title:'个人信息',
          path:'/user',
          key:'user',
          person:'setting'
        },
        {
          title:'账户设置',
          path:'/account',
          key:'account',
          person:'setting'
        },
        {
          title:'通知设置',
          path:'/notice',
          key:'notice',
          person:'setting'
        },
        {
          title:'支付设置',
          path:'/pay',
          key:'pay',
          person:'setting'
        }
      ]
    },
  ]

  // 菜单路由数据
  const [activeMenu, setActiveMenu] = useState(sessionStorage.getItem('activeMenu') || 'home');
  // 子菜单路由数据
  const [activeSubMenu, setActiveSubMenu] = useState(sessionStorage.getItem('activeSubMenu') || null);
  const navigate = useNavigate();
  // 菜单点击事件
  const handleMenuItemClick = (item) => {
      // 判断当前菜单是否是子菜单
      if (item.person) {
        // 子菜单所在的父菜单
        let personData = menuItems.filter(b => b.key === item.person)[0];
        setActiveMenu(personData.key);
        setActiveSubMenu(item.key);
        navigate(item.path);
        sessionStorage.setItem('activeMenu', personData.key);
        sessionStorage.setItem('activeSubMenu', item.key);
        return
      }else{
        sessionStorage.clear('activeSubMenu');
      }
      if (item.key === 'setting') {
        navigate('/user');
        setActiveMenu('setting');
        setActiveSubMenu('user');
        sessionStorage.setItem('activeMenu', 'setting');
        sessionStorage.setItem('activeSubMenu', 'user');
        return
      }
      // 判断当前菜单是否已经激活
      if (activeMenu === item.key) {
        navigate(item.path);
        setActiveMenu(item.key);
        setActiveSubMenu(null);
        sessionStorage.setItem('activeMenu', item.key);
        sessionStorage.clear('activeSubMenu');
        return
      } else {
        setActiveMenu(item.key);
        sessionStorage.setItem('activeMenu', item.key);
        setActiveSubMenu(null);
        sessionStorage.clear('activeSubMenu');
        navigate(item.path);
      }
      sessionStorage.setItem('activeMenu', item.key);
  };

  useEffect(() => {
    if (sessionStorage.getItem('activeMenu')) {
      setActiveMenu(sessionStorage.getItem('activeMenu'));
      console.log(activeMenu);
    }
    setActiveSubMenu(sessionStorage.getItem('activeSubMenu')||null);
  },[sessionStorage.getItem('activeMenu'), sessionStorage.getItem('activeSubMenu')])

  return (
    <div id='sidebar'>
      {/* 顶部标题 */}
      <div className='sidebar_title'>
        <img src={imgPath + 'vote.png'} alt='' className='logo' />
        <h2>售票助手</h2>
      </div>
      {/* 菜单列表 */}
      <div className='sidebar_menu'>
        {menuItems.map((item) => (
          <div key={item.key}>
            <div
              id={activeSubMenu != null ? 'active' : ''}
              className={'menu_item ' + (activeMenu === item.key ? 'active' : '')}
              onClick={() => handleMenuItemClick(item)}
            >
              <img src={activeMenu===item.key?item.iconActive:item.icon} alt={item.title} className='menu_icon' />
              <span>{item.title}</span>
              {/* 下拉菜单箭头 */}
              {item.children.length > 0 && (
                <span className='menu_arrow'>
                  <img src={activeMenu===item.key?imgPath+'arrow2.png':imgPath+'arrow1.png'}/>
                </span>
              )}
            </div>
            {/* 渲染子菜单 */}
            {item.children.length > 0 && activeMenu === item.key && (
              <div className='sub_menu'>
                {item.children.map((child) => (
                  <div
                    key={child.key}
                    className={'sub_menu_item ' + (activeSubMenu === child.key ? 'active' : '')}
                    onClick={() => handleMenuItemClick(child)}
                  >
                    <span>{child.title}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
      <div className='logout_btn' onClick={()=>navigate('/login')}>
        <img  src={imgPath+'exit.png'} alt='exit' />
        退出
      </div>
    </div>
  )
}